<template>
    <div>
        <div id="institutionsTree">
            <el-input
                placeholder="输入关键字进行过滤"
                clearable
                @clear="initBtAccountUser_clear"
                v-model="filterText">
            </el-input>
            <el-tree
                class="filter-tree"
                :data="dataInstitutions"
                :props="defaultInstitutionsProps"
                default-expand-all
                :filter-node-method="filterInstitutionsNode"
                ref="tree"
                show-checkbox
                node-key="institutionsId"
                :check-strictly="true"
                @check-change="handleCheckChange"
    	        @node-click="nodeClick">
                <!-- 处理菜单内容过长 -->
                    <span class="custom-tree-node" slot-scope="{ node }">
                        <el-tooltip class="item" effect="dark" :content="node.label" placement="top-start">
                            <span > {{ node.label | ellipsis(8) }} </span>
                        </el-tooltip>
                    </span>
            </el-tree>
        </div>

        <div id="pageList" style="margin-left: 200px;">
            <div class="addBtAccountUser">
              <!-- 筛选条件 -->
                <div style="float: left;display: flex;">
                    <el-input
                            @clear="initBtAccountUser_clear"
                            clearable
                            style="margin-right: 8px;"
                            prefix-icon="el-icon-search"
                            placeholder="请输入账户名称"
                            class="initBtAccountUser"
                            v-model="userPage.userName"
                            @keydown.enter.native="initBtAccountUserQuery">
                    </el-input>
                    <el-input
                            @clear="initBtAccountUser_clear"
                            clearable
                            prefix-icon="el-icon-search"
                            placeholder="请输入用户姓名"
                            class="initBtAccountUser"
                            v-model="userPage.realName"
                            @keydown.enter.native="initBtAccountUserQuery">
                    </el-input>
                    <el-button style="margin-left: 8px;" icon="el-icon-search" type="info" @click="initBtAccountUserQuery">查询</el-button>
                </div>
                <!-- 右上角区域 -->
                <div style="display: flex;justify-content: flex-end">
                    <el-button
                            type="primary"
                            @click="resetCondition"><i class="el-icon-remove"></i><span>重置</span>
                    </el-button>
                    <el-button
                            type="primary"
                            @click="selectHigh"><i class="el-icon-search"></i><span>高级查询</span>
                    </el-button>
                    <el-button
                            type="primary"
                            @click="insertBtAccountUser"><i class="el-icon-add-location"></i><span>新增用户</span>
                    </el-button>
                </div>
                <!-- 高级查询 -->
                <div v-if="flag" style="margin-top: 8px;float: left;display: flex;margin-bottom: 8px;">
                  <el-input
                            @clear="initBtAccountUser_clear"
                            clearable
                            prefix-icon="el-icon-search"
                            placeholder="请输入手机号码"
                            class="initBtAccountUser"
                            v-model="userPage.phone"
                            @keydown.enter.native="initBtAccountUserQuery">
                    </el-input>
                    <!-- 选择框 账户是否可用-->
                    <el-select style="margin-left: 8px;width:50%" v-model="userPage.enabled" @clear="initBtAccountUser_clear" clearable placeholder="请选择账户状态">
                        <el-option
                        v-for="item in enableds"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <!-- 用户状态 1 从业人员 2 解雇人员 -->
                    <el-select style="margin-left: 8px;width:50%" v-model="userPage.userStatus" @clear="initBtAccountUser_clear" clearable placeholder="请选择用户类别">
                        <el-option
                        v-for="item in userStatuss"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <!-- 政治面貌 -->
                    <el-select style="margin-left: 8px;width:50%" v-model="userPage.politicalLandscapeId" @clear="initBtAccountUser_clear" clearable placeholder="请选择政治面貌">
                        <el-option
                        v-for="item in politicalLandscapesSelect"
                        :key="item.politicalLandscapeId"
                        :label="item.landscapeName"
                        :value="item.politicalLandscapeId">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div>
            <!-- 列表区域 -->
                <el-table
                        :data="BtAccountUserList"
                        stripe
                        border
                        style="width: 100%"
                        v-loading="loading"
                        element-loading-text="正在加载..."
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.8)"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="用户姓名"
                            width="100">
                        <template slot-scope="scope">
                        <!-- 卡片展示 -->
                            <el-popover trigger="hover" placement="top">
                                <p>用户姓名: {{ scope.row.realName }}</p>
                                <p>账号名称: {{ scope.row.userName }}</p>
                                <p>手机号码: {{ scope.row.phone }}</p>
                                <p>部门名称: {{ scope.row.institutionsName }}</p>
                                <p>账户状态:
                                    <el-tag type="success" v-if="scope.row.enabled==1">已启用</el-tag>
                                    <el-tag type="danger" v-else>未启用</el-tag>
                                </p>
                                <p>用户类别:
                                    <el-tag type="success" v-if="scope.row.userStatus==1">从业人员</el-tag>
                                    <el-tag type="danger" v-else>解雇人员</el-tag>
                                </p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ scope.row.realName }}</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="账号名称"
                            width="100">
                        <template slot-scope="scope">
                            <span>{{ scope.row.userName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="账户状态" width="100">
                        <template slot-scope="scope">
                            <el-tag type="success" v-if="scope.row.enabled==1">已启用</el-tag>
                            <el-tag type="danger" v-else>未启用</el-tag>
                        </template>
                    </el-table-column>
                        <el-table-column
                            label="手机号码"
                            width="100">
                        <template slot-scope="scope">
                            <span>{{ scope.row.phone }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="用户类别" width="100">
                        <template slot-scope="scope">
                            <el-tag type="success" v-if="scope.row.userStatus==1">从业人员</el-tag>
                            <el-tag type="danger" v-else>解雇人员</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="政治面貌"
                            width="150">
                        <template slot-scope="scope">
                            <span>{{ scope.row.landscapeName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="部门名称"
                            width="150">
                        <template slot-scope="scope">
                            <span>{{ scope.row.institutionsName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    @click="grantRole(scope.row)"><i class="el-icon-plus"></i>授予角色</el-button>
                            <el-button
                                    @click="selectBtAccountUserInfoByUserId(scope.row)"><i class="el-icon-view"></i>查看</el-button>
                            <el-button
                                    @click="updateBtAccountUser(scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
                            <el-button
                                    type="danger"
                                    @click="deleteBtAccountUser(scope.row)"><i class="el-icon-delete"></i>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button @click="deleteBatchBtAccountUser" type="danger" style="margin-top: 8px;float: left;" :disabled="this.multipleSelection.length==0"><i class="el-icon-delete"></i>批量删除</el-button>
                <div style="display: flex;justify-content: flex-end;margin-top: 8px;">
                    <el-pagination
                            background
                            @current-change="currentChange"
                            @size-change="sizeChange"
                            layout="sizes, prev, pager, next, jumper, ->, total, slot"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <div>
            <el-dialog
                    :title="title"
                    :visible.sync="dialogVisible"
                    width="60%">
                <div>
                    <el-form :model="BtAccountUser" :rules="rules" ref="BtAccountUserForm">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="用户姓名:" prop="realName">
                                    <el-input style="width: 250px" prefix-icon="el-icon-edit" v-model="BtAccountUser.realName"
                                              placeholder="请输入用户姓名"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="账户名称:" prop="userName">
                                    <el-input style="width: 450px" prefix-icon="el-icon-edit" v-model="BtAccountUser.userName"
                                              placeholder="请输入账户名称"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="手机号码:" prop="phone">
                                    <el-input style="width: 250px" prefix-icon="el-icon-edit" v-model="BtAccountUser.phone"
                                              placeholder="请输入手机号码"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="政治面貌:" prop="politicalLandscapeId">
                                  <el-select style="width: 450px" v-model="BtAccountUser.politicalLandscapeId" clearable placeholder="请选择政治面貌">
                                    <el-option
                                    v-for="item in politicalLandscapesSelect"
                                    :key="item.politicalLandscapeId"
                                    :label="item.landscapeName"
                                    :value="item.politicalLandscapeId">
                                    </el-option>
                                </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="8">
                                <el-form-item label="证件号码:" prop="identityCard">
                                    <el-input prefix-icon="el-icon-edit"
                                    :rows="3"
                                    style="width: 250px"
                                    v-model="BtAccountUser.identityCard"
                                    placeholder="请输入身份证号码">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="入职日期:" prop="admissionTime">
                                    <el-date-picker style="width: 450px"
                                      v-model="BtAccountUser.admissionTime"
                                      type="date"
                                      placeholder="请选择入职日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                          </el-row>
                          <el-row>
                            <el-col :span="8">
                                <el-form-item label="账户状态:" prop="enabled" style="margin-left: 8px;">
                                    <el-switch
                                            v-model="BtAccountUser.enabled"
                                            active-color="#13ce66"
                                            inactive-color="#ff4949"
                                            active-text="启用"
                                            :active-value=1
                                            inactive-text="禁用"
                                            :inactive-value=2
                                            >
                                    </el-switch>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="用户类别:" prop="userStatus" style="margin-left: 8px;">
                                    <el-switch
                                            v-model="BtAccountUser.userStatus"
                                            active-color="#13ce66"
                                            inactive-color="#ff4949"
                                            active-text="从业人员"
                                            :active-value=1
                                            inactive-text="解雇人员"
                                            :inactive-value=2
                                            >
                                    </el-switch>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                             <el-col>
                                <el-form-item label="所属机构:" prop="institutionsId">
                                  <!-- 树形选择框 -->
                                    <tree-select style="margin-left: 100px;width: 815px;"
                                    :options="BtAccountInstitutionsInfoTreeList"
                                    placeholder="请选择所属机构"
                                    v-model="BtAccountUser.institutionsId"
                                    />
                                </el-form-item>
                              </el-col>
                        </el-row>
                        <el-row>
                            <el-col>
                                <el-form-item label="现居住址:" prop="address" style="margin-left: 8px;">
                                    <el-input style="margin-right: 180px;width: 815px;"
                                    type="textarea"
                                    rows="4"
                                    v-model="BtAccountUser.address"
                                    placeholder="请输入现居住址">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="insertBtAccountUserRequest">确 定</el-button>
                </span>
            </el-dialog>
        </div>
<!-- 从左往右开 -->
        <div>
            <el-drawer
                title="个人档案"
                :visible.sync="BtAccountUserInfoFlag"
                :before-close="handleClose">
                <div class="block">
                    <el-image :src="BtAccountUserInfo.userFace"  style="width: 20%; height: 20%; margin-top: 5%">
                        <div slot="placeholder" class="image-slot">
                            加载中<span class="dot">...</span>
                        </div>
                    </el-image>
                </div>
                <div>
                    <p><span>真实姓名：</span>{{BtAccountUserInfo.realName}}</p>
                    <p><span>用户账号：</span>{{BtAccountUserInfo.userName}}</p>
                    <p><span>证件号码：</span>{{BtAccountUserInfo.identityCard}}</p>
                    <p><span>手机号码：</span>{{BtAccountUserInfo.phone}}</p>
                    <p><span>政治面貌：</span>{{BtAccountUserInfo.landscapeName}}</p>
                    <p><span>机构部门：</span>{{BtAccountUserInfo.institutionsName}}</p>
                    <p><span>现居住址：</span>{{BtAccountUserInfo.address}}</p>
                </div>
                <div style="margin-top: 80px;">
                    <span>角色列表</span>
                    <el-table :data="BtAccountUserInfo.roleList">
                        <el-table-column property="chineseName" label="中文名称" width="150"></el-table-column>
                        <el-table-column property="englishName" label="英文名称" width="200"></el-table-column>
                        <el-table-column property="distcription" label="描述信息"></el-table-column>
                    </el-table>
                </div>
                </el-drawer>
        </div>
        <!-- 授予角色 -->
        <div>
            <el-dialog
                    :title="titleRole"
                    :visible.sync="dialogVisibleRole"
                    width="40%">
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisibleRole = false">取 消</el-button>
                    <el-button type="primary" @click="updateBtAccountUserRoleInfo">确 定</el-button>
                </span>
                <el-transfer
                    filterable
                    style="text-align: left; display: inline-block"
                    :titles="['未授角色', '已授角色']"
                    :button-texts="['到左边', '到右边']"
                    :filter-method="filterMethod"
                    filter-placeholder="输入角色名称进行过滤"
                    v-model="valueRoles"
                    :data="dataRole">
                </el-transfer>
            </el-dialog>
        </div>
    </div>
</template>

<script>

import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
    name:"BtAccountUser",
    components: { TreeSelect },
    data(){
        return{
            // 授予角色
            valueRoles:[],
            dataRole:[],
            filterMethod(query, item) {
                return item.roleNames.indexOf(query) > -1;
            },
            userIdTemp:'',
            flag: false,
            loading: false,
            filterText: '',
            // 查询目录属性设置
            defaultInstitutionsProps:{
                children: 'children',
                label: 'institutionsName'
            },
            // 初始化机构目录
            dataInstitutions:[],
            // 封装查询条件
            userPage:{
                userStatus:0,
                userName:'',
                enabled:0,
                roleId:'',
                realName:'',
                politicalLandscapeId:'',
                phone:'',
                institutionsId:'',
                pageNum: 1,
                pageSize: 10
            },
            enableds:[
            {
                value: 0,
                label: '请选择账户状态'
            },{
                value: 1,
                label: '已启用'
            },
            {
                value: 2,
                label: '未启用'
            }],
            userStatuss:[
            {
                value: 0,
                label: '请选择人员类别'
            },{
                value: 1,
                label: '从业人员'
            },
            {
                value: 2,
                label: '解雇人员'
            }],
            // 初始化列表
            BtAccountUserList:[],
            total: 0,
            // 初始化多选复选框
            multipleSelection:[],
            // 编辑新增框数据传输
            BtAccountUser:{
                userStatus:1,
                userName:'',
                enabled:1,
                userId:'',
                realName:'',
                politicalLandscapeId:'',
                phone:'',
                institutionsId:'init_level',
                identityCard:'',
                admissionTime:'',
                address:''
            },
            // 弹框初始化设置
            title: '',
            dialogVisible: false,
            // 授予角色
            dialogVisibleRole: false,
            titleRole: '',
            // 校验规则
            rules: {
                userName:[{required:true,message:'请输入账户名称',trigger:'blur'},
                          {
                            pattern:/^(a-z|A-Z|0-9)*[^$%^&*;:,<>?()\""\']{1,128}$/,
                            message:'账户名称超过128个字符',
                            trigger:'blur',
                          }],
                realName:[{required: true, message: '请输入用户姓名', trigger: 'blur'},
                          {
                            pattern:/^(a-z|A-Z|0-9)*[^$%^&*;:,<>?()\""\']{1,128}$/,
                            message:'用户姓名超过128个字符',
                            trigger:'blur',
                          }],
                phone:[{required: true, message: '请输入手机号码', trigger: 'blur'},
                        {
                            pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,
                            message:'手机号码格式不正确',
                            trigger: 'blur'
                        }],
                politicalLandscapeId:[{required: true, message: '请选择政治面貌', trigger: 'blur'}],
                identityCard:[{required: true, message: '请输入身份证号码', trigger: 'blur'},
                        {
                            pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                            message: '身份证号码格式不正确',
                            trigger: 'blur'
                        }],
                admissionTime:[{required: true, message: '请选择入职日期', trigger: 'blur'}],
                institutionsId:[{required: true, message: '请选择所属机构', trigger: 'blur'}],
                address:[{
                            pattern:/^(a-z|A-Z|0-9)*[^$%^&*;:,<>?()\""\']{1,128}$/,
                            message:'现居地址超过128个字符',
                            trigger:'blur',
                        }]
            },
            // 所属机构
            BtAccountInstitutionsInfoTreeList:[],
            // 政治面貌
            politicalLandscapesSelect:[],
            // 用户详情
            BtAccountUserInfo:{},
            BtAccountUserInfoFlag: false
        }
    },
    mounted(){
        // 初始化用户列表
        this.initBtAccountUserQuery();
        // 初始化机构目录
        this.selectBtAccountInstitutionsInfoTreeList();
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    methods:{
        selectHigh(){
          if(this.flag){
            this.flag = false;
          }else{
            this.selectBtUserLandscapeList();
            this.flag = true;
          }
        },
        // 重置查询条件
        resetCondition(){
            this.$refs.tree.setCheckedNodes([]);
            this.filterText = '';
            this.userPage.userStatus = 0;
            this.userPage.userName = '';
            this.userPage.roleId = '';
            this.userPage.enabled = 0;
            this.userPage.realName = '';
            this.userPage.politicalLandscapeId = '';
            this.userPage.phone = '';
            this.userPage.institutionsId = '';
            this.initBtAccountUserQuery();
        },
        initBtAccountUser_clear(){
          this.resetCondition();
        },
        // 机构目录选择
        handleCheckChange(data, checked, node){
            if(checked == true){
                this.filterText = data.institutionsName;
                this.userPage.institutionsId = data.institutionsId;
                this.$refs.tree.setCheckedNodes([data]);
            }
        },
        nodeClick(data,checked,node){
            this.filterText = data.institutionsName;
            this.userPage.institutionsId = data.institutionsId;
            this.$refs.tree.setCheckedNodes([data]);
        },
        // 机构目录节点过滤
        filterInstitutionsNode(value,dataInstitutions){
            if (!value) return true;
            return dataInstitutions.institutionsName.indexOf(value) !== -1;
        },
        // 获取机构目录
        selectBtAccountInstitutionsInfoTreeList(){
            this.getRequest("/account/BtSysInstitutions/select/BtSysInstitutionsTree").then(resp => {
                if (resp) {
                    this.dataInstitutions = resp.data;
                }
            });
        },
        // 初始化用户列表
        initBtAccountUserQuery(){
            this.loading = true;
            this.postRequest("/account/BtAccountUser/query/BtAccountUserPageList",this.userPage).then(resp => {
                this.loading = false;
                if (resp) {
                    this.BtAccountUserList = resp.data.list;
                    this.total = resp.data.total;
                }
            });
        },
        // 授予角色--穿梭框使用方法
        grantRole(data){
            this.titleRole = '授予角色';
            this.dialogVisibleRole = true;
            // 通过用户编号获取当前扮演的角色
            this.getRequest("/account/BtAccountUser/select/BtUserWithRoleInfo?userId="+data.userId).then(resp => {
                if (resp) {
                    const roleIds = [];
                    let roleList = resp.data
                    roleList.forEach((role) => {
                            roleIds.push(role.roleId);
                    });
                    this.valueRoles = roleIds;
                    this.userIdTemp = data.userId;
                }
            });
            // 查询角色选择列表
            this.getRequest("/account/BtAccountRole/select/BtRoleInfoList").then(resp => {
                if (resp) {
                    const result = [];
                    let roleList = resp.data
                    roleList.forEach((role) => {
                            result.push({
                                    label: role.chineseName,
                                    key: role.roleId,
                                    roleNames: role.chineseName
                            });
                    });
                    this.dataRole = result;
                }
            });
        },
        // 授予用户角色
        updateBtAccountUserRoleInfo(){
            let url = "/account/BtAccountUser/update/BtAccountUserRoleInfo?userId="+this.userIdTemp;
            this.valueRoles.forEach((roleId)=>{
                url += '&roleIds=' + roleId;
            });
            this.putRequest(url).then(resp => {
                if (resp) {
                    this.dialogVisibleRole = false;
                    this.userIdTemp = "";
                }
            });
        },
        // 编辑用户信息
        updateBtAccountUser(data){
            this.selectBtUserLandscapeList();
            this.title = '编辑用户信息';
            this.BtAccountUser = data;
            this.dialogVisible = true;
            this.queryBtAccountInstitutionsInfoTreeList();
        },
        // 添加用户信息
        insertBtAccountUser(){
            this.initBtAccountUser();
            this.selectBtUserLandscapeList();
            this.title = "添加用户信息";
            this.dialogVisible = true;
            this.queryBtAccountInstitutionsInfoTreeList();
        },
        insertBtAccountUserRequest(){
            if (this.BtAccountUser.userId) {
                    this.$refs['BtAccountUserForm'].validate(valid => {
                        if (valid) {
                            this.putRequest("/account/BtAccountUser/update/BtAccountUserInfo", this.BtAccountUser).then(resp => {
                                if (resp) {
                                    this.dialogVisible = false;
                                    this.initBtAccountUserQuery();
                                    this.initBtAccountUser();
                                }
                            })
                        }
                    });
            } else {
                this.$refs['BtAccountUserForm'].validate(valid => {
                    if (valid) {
                        this.postRequest("/account/BtAccountUser/insert/BtAccountUserInfo", this.BtAccountUser).then(resp => {
                            if (resp) {
                                // 关闭弹框
                                this.dialogVisible = false;
                                // 初始化列表
                                this.initBtAccountUserQuery();
                                // 初始化弹框值
                                this.initBtAccountUser();
                            }
                        })
                    }
                });
            }
        },
        // 获取机构目录
        queryBtAccountInstitutionsInfoTreeList(){
            this.getRequest("/account/BtSysInstitutions/select/BtSysInstitutionsTree").then(resp => {
                if (resp) {
                    let result = [];
                    let data = resp.data;
                    const children = this.getTree(data);
                    let obj = {}
                    obj.label = '所属机构'
                    obj.id = 'init_level'
                    obj.children = children
                    result.push(obj)
                    this.BtAccountInstitutionsInfoTreeList = result;
                }
            });
        },
        // 构建树形数据结构
        getTree (tree) {
            let arr = [];
            if (tree) {
            tree.forEach(item => {
                let obj = {};
                obj.label = item.institutionsName;
                obj.id = item.institutionsId;
                if(item.children&&item.children.length!==0) {
                   obj.children = this.getTree(item.children);
                }
                arr.push(obj);
            });
        }
            return arr;
        },
        // 初始化用户对象
        initBtAccountUser(){
            this.BtAccountUser.userStatus=1,
            this.BtAccountUser.userName='',
            this.BtAccountUser.enabled=1,
            this.BtAccountUser.userId='',
            this.BtAccountUser.realName='',
            this.BtAccountUser.politicalLandscapeId='',
            this.BtAccountUser.phone='',
            this.BtAccountUser.institutionsId='init_level',
            this.BtAccountUser.identityCard='',
            this.BtAccountUser.admissionTime='',
            this.BtAccountUser.address=''
        },
        handleSelectionChange(val){
            this.multipleSelection = val;
        },
        // 批量删除账户用户信息
        deleteBatchBtAccountUser(){
            this.$confirm('此操作将永久删除【'+this.multipleSelection.length+'】条记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let userIds = '?';
                    this.multipleSelection.forEach(item=>{
                        userIds += 'userIds='+item.userId+'&';
                    })
                    this.deleteRequest("/account/BtAccountUser/delete/BatchBtAccountUserInfoByUserIds"+ userIds).then(resp=>{
                        if (resp){
                            this.initBtAccountUserQuery();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                });
            });
        },
        // 删除账户用户信息
        deleteBtAccountUser(data){
            this.$confirm('此操作将永久删除【'+data.realName+'】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/account/BtAccountUser/delete/BtAccountUserInfoByUserId?userId='+data.userId).then(resp=>{
                        if (resp){
                            this.initBtAccountUserQuery();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                });
            });
        },
         // 查询政治面貌列表
        selectBtUserLandscapeList(){
            this.getRequest("/account/BtAccountUser/select/BtUserLandscapeList").then(resp => {
                if (resp) {
                    this.politicalLandscapesSelect = resp.data;
                }
            });
        },
        // 查询账户详情
        selectBtAccountUserInfoByUserId(data){
            this.getRequest("/account/BtAccountUser/query/BtAccountUserInfoByUserId?userId="+data.userId).then(resp => {
                if (resp) {
                    console.log(resp);
                    this.BtAccountUserInfo = resp.data;
                    this.BtAccountUserInfoFlag = true;
                }
            });
        },
        // 关闭个人档案信息
        handleClose(done) {
            done();
        },
        // 分页
        sizeChange(currentSize) {
            this.userPage.pageSize = currentSize;
            this.initBtAccountUserQuery();
        },
        currentChange(currentPage) {
            this.userPage.pageNum = currentPage;
            this.initBtAccountUserQuery();
        }
    }
}
</script>

<style>
    .addBtAccountUser{
        margin-bottom: 10px;
    }
    #institutionsTree{
        position:absolute;
        width: 180px;
        border: 1px solid #E7E7E7;
        height: 830px;
    }
    .filter-tree{
        overflow: auto;
        flex: 1;
        width: 170px;
        height: 750px;
        margin:  10px;
    }

    #institutionsTree #pageList{
        position:relative;
    }

</style>
